<template>
    <div class="container">
      <a-tabs default-active-key="todo" @change="handleTabChange">
        <a-tab-pane key="todo" title="待办">
          <ProTable
            :columns="columns"
            :request="fetchTodoList"
            row-key="id"
            :action-ref="setActionRef"
          >
            <template #operations="{ record }">
              <a-button type="text" @click="handleAudit(record)">审核</a-button>
              <a-button type="text" @click="handleViewDetail(record)">查看详情</a-button>
            </template>
          </ProTable>
        </a-tab-pane>
        <a-tab-pane key="done" title="已办">
          <ProTable
            :columns="columns"
            :request="fetchDoneList"
            row-key="id"
            :action-ref="setActionRef"
          >
            <template #operations="{ record }">
              <a-button type="text" @click="handleViewDetail(record)">查看详情</a-button>
            </template>
          </ProTable>
        </a-tab-pane>
      </a-tabs>
  
      <!-- 审核弹窗 -->
      <a-modal
        title="审核"
        v-model:visible="auditModalVisible"
        @ok="handleAuditSubmit"
        @cancel="auditModalVisible = false"
      >
        <a-form :model="auditForm">
          <a-form-item label="审核结果">
            <a-select v-model="auditForm.result">
              <a-option value="approve">通过</a-option>
              <a-option value="reject">拒绝</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="审核意见">
            <a-input v-model="auditForm.comment" placeholder="请输入审核意见" />
          </a-form-item>
        </a-form>
      </a-modal>
  
      <!-- 查看详情弹窗 -->
      <a-modal
        title="审批详情"
        v-model:visible="detailModalVisible"
        @cancel="detailModalVisible = false"
        width="80%"
      >
        <a-descriptions title="订单信息" bordered>
          <a-descriptions-item label="订单编号">{{ selectedRecord.orderNo }}</a-descriptions-item>
          <a-descriptions-item label="订单金额">{{ selectedRecord.amount }}</a-descriptions-item>
          <a-descriptions-item label="审批状态">{{ selectedRecord.status }}</a-descriptions-item>
        </a-descriptions>
        <a-steps :current="selectedRecord.currentStep">
          <a-step v-for="(step, index) in selectedRecord.steps" :key="index" :title="step.name" :description="step.status" />
        </a-steps>
      </a-modal>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { getTodoList, getDoneList, auditOrder } from '@/api/audit'; // 假设你已经定义了这些API
  
  const activeTab = ref('todo');
  const auditModalVisible = ref(false);
  const detailModalVisible = ref(false);
  const selectedRecord = ref({});
  const auditForm = ref({
    result: 'approve',
    comment: ''
  });
  const actionRef = ref();
  
  const columns = [
    { title: '订单编号', dataIndex: 'orderNo', key: 'orderNo' },
    { title: '订单金额', dataIndex: 'amount', key: 'amount' },
    { title: '审批状态', dataIndex: 'status', key: 'status' },
    { title: '操作', dataIndex: 'operations', slotName: 'operations',hideInSearch: true }
  ];
  
  const fetchTodoList = async (params) => {
    const response = await getTodoList(params);
    return {
      data: response.data.list,
      total: response.data.total,
      success: true
    };
  };
  
  const fetchDoneList = async (params) => {
    const response = await getDoneList(params);
    return {
      data: response.data.list,
      total: response.data.total,
      success: true
    };
  };
  
  const handleTabChange = (key) => {
    activeTab.value = key;
    actionRef.value.reload();
  };
  
  const handleAudit = (record) => {
    selectedRecord.value = record;
    auditModalVisible.value = true;
  };
  
  const handleViewDetail = (record) => {
    selectedRecord.value = record;
    detailModalVisible.value = true;
  };
  
  const handleAuditSubmit = async () => {
    const { success } = await auditOrder({
      orderId: selectedRecord.value.id,
      result: auditForm.value.result,
      comment: auditForm.value.comment
    });
    if (success) {
      Message.success('审核成功');
      auditModalVisible.value = false;
      actionRef.value.reload();
    }
  };
  
  const setActionRef = (ref) => {
    actionRef.value = ref;
  };
  
  onMounted(() => {
    actionRef.value.reload();
  });
  </script>
  
  <style scoped lang="less">
  .container {
    padding: 20px;
  }
  </style>